<!--
	团队卡片
	author yjl
-->
<template>
	<view
		class="team-card"
		@click="$emit('click')"
	>
		<!-- header部分左右布局 -->
		<view class="header">
			<!-- 左侧头像 -->
			<aha-avatar
				:src="team.avatar || LOGO"
				size="60"
			/>
			<!-- 如果是竞赛招募队友，要显示参与什么竞赛 -->
			<view
				v-if="team.recruitState>0"
				class="recruit"
			>
				招募中
			</view>
			<!-- 右侧两行 -->
			<view class="right">
				<!-- 队伍名 -->
				<view class="name">{{team.name}}</view>
				<!-- 成员情况 -->
				<view class="members">
					<view class="label mini">队长</view>
					<view class="val">{{captain}}</view>
					<view
						style="margin-left: 15px;"
						class="label mini"
					>
						团队人数
					</view>
					<view class="val">{{team.members.length}}</view>
				</view>
				<view class="school">
					{{team.school}}
				</view>
			</view>
		</view>
		<!-- contaniner左右分布 -->
		<view class="container">
			<!-- 简要介绍 -->
			<view class="intro small">
				<rich-text :nodes="teamIntro" />
			</view>

			<!--咨询按键 -->
			<button
				v-if="isShowContact"
				class="contact"
			>
				咨询
			</button>
		</view>
	</view>
</template>

<script>
export default {
  props: {
    team: {
      type: Object,
      default: () => {}
    },
    isShowContact: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    captain() {
      return this.team.members.find(() => this.team.captainId).memberRoughInfo.nickname
    },
    teamIntro() {
      if (this.team.recruitState > 0) {
        return this.team.recruitContent || '无团队介绍'
      }
      return this.team.intro || '无团队介绍'
    },
    tags() {
      if (this.team.tag) {
        return this.team.tag.split(' ')
      }
      return []
    }
  }
}
</script>

<style lang="scss" scoped>
.team-card {
  padding: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: 8px;

  .header {
    position: relative;
    display: flex;

    .recruit {
      position: absolute;
      top: 0;
      right: 0;
      font-weight: 700;
      color: $primary1;
      animation: shake 0.5s ease-in-out	 infinite alternate;
    }

    .right {
      position: relative;
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: flex-start;
      margin-left: 10px;

      .time {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 18rpx;
        color: $gray2;
        white-space: pre-wrap;
      }

      /* 队伍名 */

      .name {
        padding: 0 10px;
        font-weight: 700;
        background-color: $primary4;
        border-radius: 4px;
      }

      /* 成员情况 */

      .members {
        display: flex;
        align-items: center;
        margin: 5px 0;
        font-size: 24rpx;

        .label {
          padding: 0 10px;
          margin-right: 3px;
          color: #ffffff;
          background-color: $primary2;
          border-radius: 4px;
        }

        .val {
          color: $primary1;
        }
      }

      .school {
        padding: 0 10px;
        font-size: 22rpx;
        color: #ffffff;
        background-color: $primary2;
        border-radius: 4px;
      }
    }
  }

  .container {
    display: flex;
    align-items: flex-end;
    margin-top: 5px;

    .intro {
      flex: 1;
      height: 78px;
      padding: 5px;
      overflow: hidden;
      background-color: $primary4;
      border-radius: 8px;
    }

    .contact {
      width: 50px;
      margin-left: 15px;
      font-size: 22rpx;
      line-height: 1.2;
      background-color: $primary1;
      border-radius: 22px;
    }
  }
}
</style>
